<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
		<script src="jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					//隐藏图片
//					$(".dog").hide();
					//显示图片
//					$('.dog').show();
					//自动判断显隐图片
//					$('.dog').toggle();
					//加入回调函数，加上动态效果参数
//					$(".dog").toggle('slow',function(){
//						alert("隐藏掉了");
//					})
					/**
					 * 淡入淡出效果
					 */
					//淡出
//					$(".dog").fadeOut(5000);
					//淡入
//					$(".dog").fadeIn(5000);
					//自动判断淡入淡出
					$(".dog").fadeToggle(2000);
				})
				
				
			})
		</script>
			<!--//按照轮播图个数添加li-->
			                      
		<script>
			$(function(){
				for(var i =0;i<$('#banner img').length;i++){
					var a = document.createElement('li');
					$('#banner ul')[0].appendChild(a);
					$("#banner ul li").eq(0).css({'background':'#A10000'});
				}
			})
		</script>
		<script type="text/javascript">
			/**
			 * jq 淡入淡出轮播图组件
			 * 如果用户的鼠标在轮播图中快速切换，jq的动画不会结束，会产生累加，故轮播图会一直淡入淡出变化，而下方li的定时器启动产生视觉bug
			 * 解决方法
			 * 第一步，在fadeIn()前加上stop()停止该操作之前的bug
			 * 第一步之后又产生新的bug，当鼠标快速触发不同的li mouseenter事件时，因为清除了为执行的动画效果，因此，图片视觉出现卡顿bug
			 * 解决思路：延迟响应mouseenter事件触发的函数，只有当鼠标mouseenter一段时间之后才会触发方法，如果时间不到，鼠标移走，清除延迟定时器的方法
			 * 第二步，为mouseenter事件下的函数添加一个延时执行定时器，setTimeout()
			 */
			$(function(){
//				定义全局变量 掌管当前轮播的唯一变量
				var c = 0;
//				自动轮播方法
				function run (){
					c = (++c)==5?0:c;
					$("#banner .banner").eq(c).fadeIn(1000).siblings('img').fadeOut(1000);
					$("#banner ul li").eq(c).css({'background':'#A10000'}).siblings().css({'background':'#333'});
				}
				
//				增加定时器器
				var timer = setInterval(run,2000);
				
				//为鼠标添加移入事件
				//mouseover => mouseenter
				
				$("#banner ul li").mouseenter(function(){
					/**
					 * 注意！！！这里的this指向li元素,而setTimeout中的this不是这样
					 * 注意！！ clearInterval必须要确保被执行后才能再次setInterval()，因为这个方法相当于创建一个不断调用的方法的程序，
					 * 返回值是一个特定的id，我们只能通过clearInterval(返回的值)才能结束该方法的执行，
					 * 下面的timer = setInterval(run,2000); 易产生对timer变量重新赋值，结束之前的setInterval的错觉，实际上是创建了一个新的，原来的
					 * 还在，会使得轮播图莫名其妙加快，如果鼠标移出频繁会造成浏览器崩溃
					 */
					 clearInterval(timer);
					var jqthis = $(this);
					tt = setTimeout(function(){
						//在延迟器中延迟获得c的值，否则出bug，延迟器没达到应有效果
						c = jqthis.index();
					//鼠标移入后要停止轮播，因此要清除定时器
						$("#banner .banner").eq(c).stop().fadeIn(1000).siblings("img").stop().fadeOut(1000);
						$("#banner ul li").eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#333'});
					},200);
				});
				//为鼠标添加移出事件
				//mouseout => mouseleave
				$("#banner ul li").mouseleave(function(){
					//移出后重新添加定时器,定时器添加后不会立即执行，等延迟时间过后再执行
					clearTimeout(tt);
					timer = setInterval(run,2000);
				})
			})
		</script>
		<style>
			#banner{
				width: 1200px;
				height: 535px;
				border:3px solid blue;
				position: relative;
				margin: 20px;
			}
			#banner .banner{
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			#banner ul{
				width: 100%;
				position: absolute;
				top: 95%;
				text-align: center;
			}
			#banner ul li{
				display: inline-block;
				width: 10px;
				height: 10px;
				margin: 0 15px;
				background: #333;
				border-radius: 50%;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我显隐图片</button>
		<div>
			<img class="dog" src="../../img/dog.jpg">
		</div>
		<p class="dog">sdfasdfasdfasdfadsfasdfasdfsdafasdfasdfasdfasdfasdfdfasdf</p>
		<h1>标记</h1>
		
		<div id="banner">
			<img src="../../img/1.jpg" alt="1" class="banner" style="display:block" />
			<img src="../../img/2.jpg" alt="2" class="banner" />
			<img src="../../img/3.jpg" alt="3" class="banner" />
			<img src="../../img/4.jpg" alt="4" class="banner" />
			<img src="../../img/5.jpg" alt="5" class="banner" />
			<ul>
				<!--<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>-->
			</ul>
		</div>
	</body>
</html>
